<template>
    <view>
        <view class="bg"></view>

        <view class="header">
            <image class="header-img" mode="widthFix" src="/static/in_fulidating/1.png"></image>
            <view class="header-title">新人福利专区</view>
            <view class="header-user">
                <u-row>
                    <u-col span="3">
                        <view>
                            <image class="header-user-img" mode="aspectFit" :src="userSelf.image_url"></image>
                        </view>
                    </u-col>
                    <u-col span="9">
                        <view class="header-user-info">
                            <view class="header-user-name">{{ userSelf.nickName }}</view>
                            <view class="header-user-phone">{{ userSelf.phone }}</view>
                            <!-- 注册时间 -->
                            <view class="header-user-time">注册时间：{{ userSelf.createAt.split(" ")[0] }}</view>
                        </view>
                    </u-col>
                </u-row>
            </view>
            <!-- 按钮区域 -->
            <view class="header-btn-box">
                <view class="header-btn">
                    <view class="header-btn-text" @click="toPage('/pages/wodefuli')">我的福利</view>
                </view>
            </view>
        </view>


        <!-- 福利专区 -->
        <view class="fuli-box">
            <view class="fuli-title">福利专区</view>
            <view class="fuli-list">
                <view v-for="(item, index) in bdyData" :key="index" class="fuli-item">
                    <view class="fuli-item-header">{{ item.name }}</view>
                    <view style="height: 20rpx;"></view>
                    <u-row>
                        <u-col span="3.2">
                            <view>
                                <image class="fuli-item-img" mode="aspectFit" :src="item.imgUrl"></image>
                            </view>
                        </u-col>
                        <u-col span="5.8">
                            <view>
                                <view class="fuli-item-content">{{ item.content }}</view>
                                <view class="fuli-item-time">{{ item.time }}</view>
                                <!-- 折扣金额 -->
                                <view class="fuli-item-price" v-if="item.price != '' && item.price != null && item">
                                    折扣<text class="fuli-item-price-num">{{ item.price }}</text>元
                                </view>
                                <view class="fuli-item-price" v-else>
                                    打<text class="fuli-item-price-num">{{ item.price }}</text>折
                                </view>
                            </view>
                        </u-col>
                        <u-col span="3">
                            <view>
                                <view @click="getBenefitCoupon(item.id)" class="fuli-item-btn">立即领取</view>
                            </view>
                        </u-col>
                    </u-row>
                    <view style="height: 20rpx;"></view>

                </view>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    data() {
        return {
            bdyData: [
                {
                    "content": "内容", //描述内容
                    "createTime": "2023-03-22 18:07:09",
                    "startTime": "2023-03-22 18:07:09", //开始时间
                    "endTime": "2023-03-22 18:07:09", //结束时间
                    "delayDay": 20, //多少天后可使用
                    "discount": 8, //折扣
                    "flag": "xxx", //活动标识
                    "id": 1, //福利couponId
                    "imgUrl": "图片", //福利图片
                    "name": "清洗券", //福利名称
                    "price": 100, //价格
                    "status": 1 //状态 0不启用 1启用
                }
            ],
            userSelf: {
                "createAt": "2023-01-30 17:32:31",
                "image_url": "",
                "nickName": "悟",
                "phone": "18370036521",
            },
            token: ""
        }
    },
    onLoad(options) {
        var token = uni.getStorageSync('token');
        if (token == null || token == '') {
            uni.setStorageSync('token', options.token)
        }
        this.token = uni.getStorageSync('token');
        this.getBodyData();
        this.getUserSelf();
    },
    mounted() {
    },
    methods: {
        toPage(url) {
            uni.navigateTo({
                url: url
            });
        },
        getBenefitCoupon(id) {

            uni.navigateTo({
                url: '/pages/lingqufuli?id=' + id + "&token=" + this.token
            });

            // // 获取活动id:getActivity
            // this.$kt.request.request({
            //     api: this.$api.taskActivity.getActivity,
            //     data: {
            //         flag: 'xrzc'
            //     },
            //     stateSuccess: (res) => {
            //         var activityId = res.data.id;
            //         // 领取优惠券:getBenefitCoupon
            //         this.$kt.request.request({
            //             api: this.$api.taskActivity.getBenefitCoupon,
            //             data: {
            //                 activityId,
            //                 couponId
            //             },
            //             stateSuccess: (res1) => {
            //                 uni.showToast({
            //                     title: '领取成功',
            //                     icon: 'success',
            //                     duration: 2000
            //                 });
            //             },
            //             stateFail: (res1) => {
            //                 uni.showToast({
            //                     title: res1.msg,
            //                     icon: 'none',
            //                     duration: 2000
            //                 });
            //             }
            //         });
            //     },
            //     stateFail: (res) => {
            //         uni.showToast({
            //             title: res.msg,
            //             icon: 'none',
            //             duration: 2000
            //         });
            //     }
            // });


        },
        getUserSelf() {
            this.$kt.request.request({
                api: this.$api.user.getUserInfoSelf,
                stateSuccess: (res) => {
                    this.userSelf = res.data;
                }
            });
        },

        getBodyData() {
            this.$kt.request.request({
                api: this.$api.taskActivity.getActivityBenefit,
                data: {
                    flag: 'xrzc'
                },
                stateSuccess: (res) => {
                    this.bdyData = res.data;
                    // 取开始时间和结束时间的日期
                    this.bdyData.forEach((item) => {
                        let startTime = item.startTime.split(" ")[0];
                        let endTime = item.endTime.split(" ")[0];
                        item["time"] = startTime + " 至 " + endTime;
                    });
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 100, 80);
}

.header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;

    .header-img {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
    }

    .header-title {
        position: absolute;
        top: 0rpx;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 65rpx;
        font-weight: bold;
        color: #fff;
        padding: 30rpx 0 0 0;
        text-shadow: 0 5rpx 5rpx #f75243;
    }

    .header-user {
        position: absolute;
        display: inline-block;
        top: 200rpx;
        width: 500rpx;
        padding: 30rpx 30rpx 0 0;
        box-sizing: border-box;
        left: 180rpx;

        .header-user-img {
            position: relative;
            top: 0;
            left: 0;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            overflow: hidden;
        }

        .header-user-info {
            position: absolute;
            top: 20rpx;
            left: 0;
            width: 100%;
            padding: 0 0 0 120rpx;
            box-sizing: border-box;

            .header-user-name {
                font-size: 40rpx;
                font-weight: bold;
                color: #fff;
                text-shadow: 0 5rpx 5rpx #f75243;
            }

            .header-user-phone {
                font-size: 30rpx;
                color: #fff;
                text-shadow: 0 5rpx 5rpx #f75243;
            }

            .header-user-time {
                position: absolute;
                font-size: 28rpx;
                color: #fff;
                top: 100rpx;
                text-shadow: 0 5rpx 5rpx #f75243;
            }
        }
    }

}


.header-btn-box {
	position: absolute;
	top: 0rpx;
	right: 10rpx;
	z-index: 100;

	.header-btn {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}
}


.header-btn:active {
	opacity: .7;
}
.fuli-box {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;

    .fuli-title {
        font-size: 40rpx;
        font-weight: bold;
        text-align: center;
        color: #fff;
    }

    .fuli-item {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin-top: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 15rpx;
        box-sizing: border-box;
        box-shadow: 0 10rpx 10rpx rgba(118, 118, 118, .3);

        .fuli-item-header {
            font-size: 28rpx;
            color: #f75243;
            font-weight: bold;
            padding: 0 0 10rpx 0;
            // 分割线
            border-bottom: 1rpx solid rgba(118, 118, 118, .1);
        }

        .fuli-item-img {
            position: relative;
            top: 0;
            left: 0;
            margin-top: 20rpx;
            width: 150rpx;
            height: 150rpx;
            border-radius: 20rpx;
        }

        .fuli-item-content {
            font-size: 32rpx;
            color: #333;
            margin-top: 0rpx;
        }

        .fuli-item-time {
            font-size: 24rpx;
            color: #999;
            margin-top: 10rpx;
        }

        .fuli-item-price {
            font-size: 32rpx;
            color: #f75243;
            margin-top: 10rpx;

            .fuli-item-price-num {
                font-size: 40rpx;
                font-weight: bold;
                margin: 0 10rpx 0 10rpx;
            }
        }

        .fuli-item-btn {
            position: relative;
            top: 0;
            left: 0;

            padding: 20rpx 0 20rpx 0;
            text-align: center;
            font-size: 30rpx;
            color: #fff;
            background-color: #f75243;
            border-radius: 20rpx;
            box-shadow: 0 5rpx 10rpx #f75243;
            margin-top: 20rpx;
        }

        .fuli-item-btn:active {
            box-shadow: 0 2rpx 5rpx #f75243;
            transform: translateY(3rpx);
        }

    }


}
</style>